$(function () {
    localStorage.clear();
    addzikongsystemData();
    setInterval(() => {
        addzikongsystemData();
    }, 1000 * 1);
    // $('.autoSystemClass').on('click', function () {

    // });
    $('.popupClose6').on('click', function () {
        $('.popupClose6').css('display', 'none');
        $('.popup6').animate({ width: '3px' }, 400, function () {
            $('.popup6').animate({ height: 0 }, 400);
        });
        setTimeout(summaryHide6, 800);
    });

    function summaryHide6() {
        clearInterval(autoplaytime)
        localStorage.clear()
        $('.filterbg6').hide();
        $('.popup6').hide();
        $('.popup6').width(0);
    };
})

function autoClassclick() {
    var clickIndex = localStorage.getItem("clickIndex");
    if (clickIndex == 6) {
        return
    }
    $('.popupClose' + clickIndex).css('display', 'none');
    $('.popup' + clickIndex).animate({ width: '3px' }, 400, function () {
        $('.popup' + clickIndex).animate({ height: 0 }, 400);
    });
    setTimeout(function () {
        $('.filterbg' + clickIndex).hide();
        $('.popup' + clickIndex).hide();
        $('.popup' + clickIndex).width(0);
        clearInterval(autoplaytime)
        localStorage.setItem("clickIndex", "6");
    }, 400);

    $('.filterbg6').show();
    $('.popup6').show();
    $('.popup6').width('3px');
    $('.popup6').animate({ height: '76%' }, 400, function () {
        $('.popup6').animate({ width: '70%' }, 400);
    });
    setTimeout(summaryShow6, 800);
}

var autoplaytime
function summaryShow6() {
    // getsysjxzkzuotoplay()
    // autoplaytime = setInterval(() => {
    //     getsysjxzkzuotoplay();
    // }, 1000 * 30);
    $('.popupClose6').css('display', 'block');
};

function addzikongsystemData() {
    $.ajax(baseUrl + ":8091/dev-device-instance/getDeviceDataInfo", {
        method: 'GET',
        data: {
            id: "jczk",
        },
        headers: {
            "content-type": "application/json",
        },
        success: function (result) {
            if (result.code == 200) {
                //getsysjczkData(result.data.list.records[0])
                xuanrAutoZIkong(result.data.list.records[0]);
            }
        },
        error: function (err) {
            console.log(err);
        }
    })
}

function xuanrAutoZIkong(obj) {
    var count = 0;
    var html1zk = "";
    var html2zk = "";
    var html3zk = "";
    var html4zk = "";
    var html5zk = "";
    var html6zk = "";
    var html7zk = "";
    var html8zk = "";
    var html9zk="";
    for (const key in obj) {
        if ("derive_metadata" != key && "creator_id"!=key) {


            count++;
            if (count < 22) {
                html1zk += '<div style="padding-top: 20px;display: flex;">'
                html1zk += '<div style="width:260px;float: left;">' + key + '</div>';
                html1zk += '<div style="border: 1px solid #fff;float: right;margin-right: 20px; width: 100px;">' + obj[key] + ''
                html1zk += '</div></div>'
            }
            if (count >= 22 && count < 43) {
                html2zk += '<div style="padding-top: 20px;display: flex;">'
                html2zk += '<div style="width:260px;float: left;">' + key + '</div>';
                html2zk += '<div style="border: 1px solid #fff;float: right;margin-right: 20px; width: 100px;">' + obj[key] + ''
                html2zk += '</div></div>'
            }
            if (count >= 43 && count < 64) {
                html3zk += '<div style="padding-top: 20px;display: flex;">'
                html3zk += '<div style="width:260px;float: left;">' + key + '</div>';
                html3zk += '<div style="border: 1px solid #fff;float: right;margin-right: 20px; width: 100px;">' + obj[key] + ''
                html3zk += '</div></div>'
            }
            if (count >= 64 && count < 85) {
                html4zk += '<div style="padding-top: 20px;display: flex;">'
                html4zk += '<div style="width:260px;float: left;">' + key + '</div>';
                html4zk += '<div style="border: 1px solid #fff;float: right;margin-right: 20px; width: 100px;">' + obj[key] + ''
                html4zk += '</div></div>'
            }
            if (count >= 85 && count < 106) {
                html5zk += '<div style="padding-top: 20px;display: flex;">'
                html5zk += '<div style="width:260px;float: left;">' + key + '</div>';
                html5zk += '<div style="border: 1px solid #fff;float: right;margin-right: 20px; width: 100px;">' + obj[key] + ''
                html5zk += '</div></div>'
            }
            if (count >= 106 && count < 127) {
                html6zk += '<div style="padding-top: 20px;display: flex;">'
                html6zk += '<div style="width:260px;float: left;">' + key + '</div>';
                html6zk += '<div style="border: 1px solid #fff;float: right;margin-right: 20px; width: 100px;">' + obj[key] + ''
                html6zk += '</div></div>'
            }
            if (count >= 127 && count < 148) {
                html7zk += '<div style="padding-top: 20px;display: flex;">'
                html7zk += '<div style="width:260px;float: left;">' + key + '</div>';
                html7zk += '<div style="border: 1px solid #fff;float: right;margin-right: 20px; width: 100px;">' + obj[key] + ''
                html7zk += '</div></div>'
            }
            if (count >= 148 && count < 169) {
                html8zk += '<div style="padding-top: 20px;display: flex;">'
                html8zk += '<div style="width:260px;float: left;">' + key + '</div>';
                html8zk += '<div style="border: 1px solid #fff;float: right;margin-right: 20px; width: 100px;">' + obj[key] + ''
                html8zk += '</div></div>'
            }
            if (count >= 169 && count < 190) {
                html9zk += '<div style="padding-top: 20px;display: flex;">'
                html9zk += '<div style="width:260px;float: left;">' + key + '</div>';
                html9zk += '<div style="border: 1px solid #fff;float: right;margin-right: 20px; width: 100px;">' + obj[key] + ''
                html9zk += '</div></div>'
            }
        }
    }
    document.getElementById("autokongzhiId").innerHTML = html1zk
    document.getElementById("autokongzhiId2").innerHTML = html2zk
    document.getElementById("autokongzhiId3").innerHTML = html3zk
    document.getElementById("autokongzhiId4").innerHTML = html4zk
    document.getElementById("autokongzhiId5").innerHTML = html5zk
    document.getElementById("autokongzhiId6").innerHTML = html6zk
    document.getElementById("autokongzhiId7").innerHTML = html7zk
    document.getElementById("autokongzhiId8").innerHTML = html8zk
    document.getElementById("autokongzhiId9").innerHTML = html9zk
}

function getsysjczkData(val) {
    var data = {
        tag500: val.Tag500,
        tag596: val.Tag596,
    }
    $.ajax("http://192.168.15.10:8080/system/autoplay/add", {
        method: 'post',
        data: JSON.stringify(data),
        headers: {
            "content-type": "application/json",
        },
        success: function (result) {


        },
        error: function (err) {
            console.log(err);
        }
    })
}

var tag500Arr = []
var timeArr = []

function getsysjxzkzuotoplay() {
    $.ajax("http://192.168.15.10:8080/system/autoplay/getCurrentDataInfo", {
        method: 'get',
        data: {},
        headers: {
            "content-type": "application/json",
        },
        success: function (result) {
            var id = []
            tag500Arr = []
            timeArr = []
            if (result.code == 200) {
                for (let i = 0; i < result.data.length; i++) {

                    //判断在id这个数组中有没有找到id
                    if (id.indexOf(getNowFormatDate(result.data[i].createTime)) == -1) {
                        //把id用push存进id这个数组中
                        id.push(getNowFormatDate(result.data[i].createTime));
                        timeArr.push(getNowFormatDate(result.data[i].createTime))
                        tag500Arr.push(result.data[i].tag500)
                    }
                }
                selCHhartsData()
            }

        },
        error: function (err) {
            console.log(err);
        }
    })
}

function selCHhartsData() {
    //autoplyasystemDiaDivId
    var chartDom = document.getElementById('autoplyasystemDiaDivId');
    var myChart = echarts.init(chartDom);
    var option;
    option = {
        title: {
            text: ''
        },
        tooltip: {
            trigger: 'axis'
        },
        color: ['aqua'],
        legend: {
            data: ['一号罐液位'],
            textStyle: {
                color: "#fff"
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {},
        xAxis: {
            type: 'category',
            // boundaryGap: false,
            data: timeArr,


            axisLabel: {
                show: true,//是否显示轴线
                textStyle: {
                    color: '#fff' // 设置x轴字体颜色为红色
                },
                lineStyle: {
                    color: '#fff',//刻度线的颜色
                    width: 2
                }

            },
        },
        yAxis: {
            name: "M", //y轴上方的单位
            type: 'value',
            axisLine: {
                show: true,//是否显示轴线
                lineStyle: {
                    color: '#fff',//刻度线的颜色
                    width: 2
                }
            },
        },
        series: [
            {
                name: '一号罐液位',
                type: 'line',
                // stack: 'Total',
                data: tag500Arr
            },
        ]
    };

    option && myChart.setOption(option);
}